<template lang="html">
  <div class="">
    <div class="search">
        <div class="input">
            <p><label>店铺名称：</label><el-input placeholder="请输入内容" v-model="pageData.storeName"></el-input></p>
            <p>
              <label>省份名称：</label>
              <el-select v-model="pageData.provinceId" placeholder="请选择" @change="getcity">
                <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in pageData['province']"
                  :key="item.value"
                  :label="item.fullName"
                  :value="item.id">
                </el-option>
              </el-select>
            </p>
            <p>
              <label>城市名称：</label>
              <el-select v-model="pageData.cityId" placeholder="请选择" @change="getdistrict">
                <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in pageData['city']"
                  :key="item.value"
                  :label="item.fullName"
                  :value="item.id">
                </el-option>
              </el-select>
            </p>
            <p>
              <label>区域名称：</label>
              <el-select v-model="pageData.areaId" placeholder="请选择">
                <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in pageData['area']"
                  :key="item.value"
                  :label="item.fullName"
                  :value="item.id">
                </el-option>
              </el-select>
            </p>
             <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
       <el-button type="primary" @click="add">新增</el-button>
    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row,1)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="handleEdit(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>

  </div>
</template>

<script>
  import Data from './shopData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import {
    shopList,
    delLocal,
    delShop,
    getReginal
  } from "@/api/product/product";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
       var data= {}
        this.getshopList(data,'');
        var level = 1
        getReginal(level).then(res=>{ //省份
          if (res.data.code == 'OK') {
               this.pageData['province'] = res.data.data;
          }
        })
    },
    methods :  {
      getshopList (data,val) {
        data['current'] = val == '' ? '1' : val
        data['size'] = '10'
        shopList (data).then(res=>{
          if (res.data.code == 'OK') {
            this.total = res.data.data.total;
            this.list.tbody = res.data.data.records.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               return item;
            });
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      add () {
        if (checkPermission('add_shop') == true) {
          this.$router.push({
            name : 'addShop'
          })
        } else {
          this.$message.error('您没有权限访问');
        }
      },
      handleEdit (item,num) {
        if (num == 1) {
          if (checkPermission('find_shop')==true) {
            this.$router.push({
              name : 'addShop',
              query : {
                num : num,
                item : JSON.stringify(item)
              }
            })
          } else {
            this.$message.error('您没有权限访问');
          }
        } else {
          if (checkPermission('del_shop')==true) {
            this.delMessage(()=>{
              delShop(item.storeId).then(res=>{
                if (res.data.code == 'OK') {
                    this.$message.success('删除成功');
                    var data= {}
                    this.getshopList(data,'');
                } else {
                  this.$message.error(res.data.message);
                }
              })
            })
          }else {
              this.$message.error('您没有权限访问');
          }
        }
      },
      getcity (val) {//获取城市
        if (this.pageData.provinceId !== '') {
          var data = {
            level : 2,
            parentId : val
          }
          getReginal(data).then(res=>{
            if (res.data.code == 'OK') {
               this.pageData.city = res.data.data;
            }
          })
        } else {
           this.pageData.city = [];
           this.pageData.cityId =''
        }
      },
      getdistrict (val) {//获取区域
        if (this.pageData.cityId !== '') {
          var data = {
            level : 3,
            parentId : val
          }
          getReginal(data).then(res=>{
            if (res.data.code == 'OK') {
               this.pageData.area = res.data.data;
            }
          })
        } else {
          this.pageData.area  = [];
          this.pageData.areaId ='';
        }
      },
      handSize (val) {
        var data = {
          storeName : this.pageData.storeName,
          provinceId : this.pageData.provinceId,
          cityId : this.pageData.cityId,
          areaId : this.pageData.areaId,
          size : '10',
        }
        this.getshopList(data,val);
      },
      search () {
        var data = {
          storeName : this.pageData.storeName,
          provinceId : this.pageData.provinceId,
          cityId : this.pageData.cityId,
          areaId : this.pageData.areaId,
        }
        this.getshopList(data);
      }
    }
}
</script>

<style scoped>
  @import "../../../styles/common.css";
</style>
